<template>
    <view class="content">
		<label class="_label_top">
			每日一张牌
		</label>
		<label class="_label_top1">
		  解读你今日运势
		</label>
		<label class="_label_bottom">每日00:00更新</label>
		<view class="_kapai">
			<image :class='backClass' @tap="rotateFn" src="https://zhanbu.nomeis.cn/upload/page_resource/kapai_back.png" mode="scaleToFill"></image>
			<image :class='faceClass' @tap='rotateFn' :src="image" mode="scaleToFill"></image>
			<view :class="faceClassBtn">
				<!-- <rich-text class="_rand_text"  :nodes="rand_text"></rich-text> -->
				<!-- <mBtnCs class="_lbtn" text="分享今日签到" showImg='0'  @tap="share"/> -->
				<mBtnCs class="_lbtn" text="分享今日签到" showImg='0' isconcat='1' openType='share'/>
			</view>
		</view>
		<official-account></official-account>
    </view>
</template>

<script>
    // import {
    //     mapState
    // } from 'vuex'
	import mBtnCs from '@/components/m-btn/m-btn-cs.vue'
	import comm from '../../common/helpers.js'
	import mutil from "../../static/js/util.js"
    export default {
		components:{mBtnCs},
		data(){
			return{
				backClass:'_back',
				faceClass:'_face',
				faceClassBtn:'_facebtnback',
				rand_text:'',
				isGet:false,
				image:'https://zhanbu.nomeis.cn/upload/page_resource/kapai_face.png'
			}
		},
        onLoad() {
			mutil.getSystemInfo()
			comm.login()
        },
		onShow() {
			uni.setStorageSync('m23lock',0)
			uni.setStorageSync('m32lock',0)
			uni.setStorageSync('m33lock',0)
		},
		methods:{
			rotateFn(){
				let that = this
				that.isGet = (!that.isGet)
				if(that.isGet){
					this.getRandomCard()
				}
			},
			getRandomCard(){
				let that = this
				let flag = true
				//判断日期是否在同一天
				let olddate = uni.getStorageSync('rand_time')
				if(mutil.formatTime(new Date()) != olddate){
					flag = true
					//清空内容
					uni.setStorageSync('rand_image','')
				}else{
					// 同一天即获取缓存中的内容
					that.image = uni.getStorageSync('rand_image')
					// 这里获取成功后才进行卡牌翻转操作
					if(that.backClass == '_back' && 
					   that.faceClass == '_face'){
						that.backClass = "front";
						that.faceClass = "back";
						setTimeout(function () {
							// that.setData({
							that.backClass = "_face";
							that.faceClass = "_back";
							// })
						}, 1000);
						
						setTimeout(function () {
							// that.setData({
							that.faceClassBtn = "_facebtn";
							// })
						}, 2000);
					}else{
						that.backClass = "back";
						that.faceClass = "front";
						setTimeout(function () {
							// that.setData({
							that.backClass = "_back";
							that.faceClass = "_face";
							// })
						}, 1000);
						
						setTimeout(function () {
							// that.setData({
							that.faceClassBtn = "_facebtnback";
							// })
						}, 10);
					}
				}
				//判断是否已存在卡牌
				if(uni.getStorageSync('rand_image') != ''){
					flag = false
				}
				if(flag){
					//获取随机卡牌
					uni.request({
						url: comm.websiteUrl +'?s=v1/getrandcard/',
						method: 'GET',
						data: {},
						success: res => {
							// that.rand_text = res.data.data.content
							that.image  = res.data.data.image
							// uni.setStorageSync('rand_text',res.data.data.content)
							uni.setStorageSync('rand_image',res.data.data.image)
							// 存储今天日期，下一次进来时更新日期
							let date = mutil.formatTime(new Date())
							uni.setStorageSync('rand_time',date)
							// console.log(res.data)
							// 这里获取成功后才进行卡牌翻转操作
							if(that.backClass == '_back' && 
							   that.faceClass == '_face'){
								that.backClass = "front";
								that.faceClass = "back";
								setTimeout(function () {
									// that.setData({
									that.backClass = "_face";
									that.faceClass = "_back";
									// })
								}, 1000);
								
								setTimeout(function () {
									// that.setData({
									that.faceClassBtn = "_facebtn";
									// })
								}, 2000);
							}else{
								that.backClass = "back";
								that.faceClass = "front";
								setTimeout(function () {
									// that.setData({
									that.backClass = "_back";
									that.faceClass = "_face";
									// })
								}, 1000);
								
								setTimeout(function () {
									// that.setData({
									that.faceClassBtn = "_facebtnback";
									// })
								},10);
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			share(){
				mutil.navTo('/pages/share/share')
			}
		},
		computed:{
		}
    }
</script>

<style lang="scss">
	.content{
		padding: 0upx;
		background-image: url("https://zhanbu.nomeis.cn/upload/page_resource/bg_not_kapai.jpg");
		background-size: 100% 100%;
		
		._label_top{
			z-index:5;
			position:relative;
			top:-8%;
			margin:auto;
			display:flex;
			text-align:center;
			color: #3FD42B;
			font-size: 9pt;
			height: 35upx;
		}
		
		._label_top1{
			z-index:5;
			position:relative;
			top:-38%;
			margin:auto;
			display:flex;
			text-align:center;
			color: #3FD42B;
			font-size: 9pt;
			height: auto;
			height: 35upx;
		}
		
		._label_bottom{
			z-index:5;
			position:relative;
			top:5%;
			margin:auto;
			display:flex;
			text-align:center;
			color: #3FD42B;
			font-size: 9pt;
			text-align:center;
			color:#3FD42B;
			font-size:9pt;
			height:auto;
		}
		
		image{
			width: 100%;
			height: 100%;
			vertical-align: bottom;
			bottom: 0;
			right: 0;
			position:absolute;
			vertical-align: middle;
		}
		
		
		
		._kapai{
			width:70%;
			height:65%;
			z-index:1;
			left:15%;
			top:15%;
			z-index: 1;
			transform-style:preserve-3d;
			position:absolute;
			
			._back,._face{
				width:100%;
				height:100%;
				display:flex;
				position:absolute;
			}
			
			._back{
				z-index: 3;
			}
			
			._facebtn{
				z-index: 3;
				display: flex;
				._lbtn{
					position:absolute;
					width:100%;
					top: 85%;
					z-index:3;
					display: flex;
				}
			}
			
			
			._facebtnback{
				z-index: 2;
				display: none;
				._lbtn{
					position:absolute;
					width:100%;
					top: 85%;
					z-index:2;
					display: none;
				}
			}
			
			._face{
				z-index: 2;
				display:none;
			}
			
			.flexClass{
				display:flex;
			}
			
			
			
			.front{
				animation:front 1s linear 1;
				backface-visibility: hidden;
			}
			.back{
				animation:back 1s linear 1;
			}
			
			
			@keyframes front{from{transform: rotateY(0deg);}  to{transform: rotateY(180deg);}}
			@keyframes back{from{transform: rotateY(-180deg);}  to{transform: rotateY(0deg);}}
			
			
			._ritx{
				display:flex;
				position:relative;
				justify-content:center;
				padding-top:180rpx;
				font-size:8pt;
			}
			
		}
	}
</style>
